<template>
  <layout-content
    v-loading="uiState.loading"
    :header="$t('commons.form.detail')"
    :back-to="{ name: 'Namespaces' }"
  >
    <el-card v-if="!query.yaml && detailsModel" class="el-card">
      <el-col :span="24">
        <ko-detail-basic
          v-if="detailsModel.metadata.name"
          v-model:yaml-show="query.yaml"
          :item="detailsModel"
        />
      </el-col>
    </el-card>

    <div v-else-if="query.yaml">
      <yaml-editor :value="yamlDetailsModel" :read-only="true" />
      <div class="bottom-button">
        <el-button @click="query.yaml = !query.yaml">
          {{ $t("commons.button.back_detail") }}
        </el-button>
      </div>
    </div>
  </layout-content>
</template>

<script setup lang="ts">
import LayoutContent from "@/views/domain/kubeHud/views/components/layout/LayoutContent.vue";
import YamlEditor from "@/views/domain/kubeHud/views/components/yaml-editor/index.vue";
import KoDetailBasic from "@/views/domain/kubeHud/views/components/detail/detail-basic.vue";
import { useK8SApi } from "@/views/domain/kubeHud/api/k8s";
import { useBaseDetailsProvider } from "@/views/domain/kubeHud/api/provider/baseDetailsProvider";
// import { getNamespace } from "@/api/namespaces";

const { namespaceRepo } = useK8SApi();

const {
  detailsModel,
  uiState,
  query,
  router,
  reloadDetails,
  reloadQuery,
  yamlDetailsModel
} = useBaseDetailsProvider(
  {
    getDetailsReq: namespaceRepo.getNamespaceDetail
  },
  true
);
</script>

<style scoped></style>
